<template> 
  <view class="container"> 
    <!-- 顶部导航栏 --> 
    <view class="nav-bar"> 
      <view class="back" @click="navigateBack"> 
        <uni-icons type="left" size="20"></uni-icons> 
      </view> 
      <view class="title">我的订单</view> 
      <view class="right"> 
        <uni-icons type="more-filled" size="20"></uni-icons> 
      </view> 
    </view> 
    
    <!-- 标签页 --> 
    <view class="bg"> 
    </view> 
    <view class="tabs"> 
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)" 
      >进行中</view> 
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)" 
      >已完成</view> 
    </view> 
    
    <!-- 筛选区域 --> 
    <view class="filter-section"> 
      <view class="filter-item"> 
        <text>维修方式:</text> 
        <uni-data-select 
          v-model="repairType" 
          :localdata="repairTypes" 
          placeholder="全部" 
        ></uni-data-select> 
      </view> 
      <view class="filter-item"> 
        <text>预约日期</text> 
        <uni-datetime-picker 
          v-model="appointmentDate" 
          type="date" 
        ></uni-datetime-picker> 
      </view> 
    </view> 
    
    <!-- 订单列表 --> 
    <view class="order-list"> 
      <view class="order-item" v-for="(item, index) in orderList" :key="index"> 
        <view class="order-info"> 
          <view class="info-row"> 
            <text class="label">维修单号:</text> 
            <text class="value">{{ item.orderNo }}</text> 
          </view> 
          <view class="info-row"> 
            <text class="label">维修方式:</text> 
            <text class="value">{{ item.repairType }}</text> 
          </view> 
          <view class="info-row"> 
            <text class="label">预约日期:</text> 
            <text class="value">{{ item.appointmentDate }}</text> 
          </view> 
        </view> 
      </view> 
    </view> 
  </view> 
</template> 

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const currentTab = ref(0);
const repairType = ref('');
const appointmentDate = ref('');
const repairTypes = ref([
  { 
    text: '全部', 
    value: '' 
  }, 
  { 
    text: '到店维修', 
    value: 'store' 
  }, 
  { 
    text: '上门取车', 
    value: 'pickup' 
  }
]);
const orderList = ref([
  { 
    orderNo: '3535252', 
    repairType: '到店维修', 
    appointmentDate: '2022/11/10 11:00' 
  }, 
  { 
    orderNo: '3535252', 
    repairType: '上门取车', 
    appointmentDate: '2022/11/10 11:00' 
  }, 
  { 
    orderNo: '3535252', 
    repairType: '到店维修', 
    appointmentDate: '2022/11/10 11:00' 
  }
]);

// 定义方法
const navigateBack = () => {
  uni.navigateBack();
};

const switchTab = (index) => {
  currentTab.value = index;
  // TODO: 根据tab切换加载不同状态的订单 
};
</script> 

<style lang="scss" scoped> 
.bg{ 
  width: 100%; 
  height: 250rpx; 
  background-color: #007aff; 
} 
.container { 
  min-height: 100vh; 
  background-color: #f5f5f5; 
} 

.nav-bar { 
  display: flex; 
  align-items: center; 
  height: 44px; 
  background-color: #007AFF; 
  color: #fff; 
  padding: 0 15px; 
  
  .back { 
    width: 44px; 
  } 
  
  .title { 
    flex: 1; 
    text-align: center; 
    font-size: 18px; 
  } 
  
  .right { 
    width: 44px; 
    text-align: right; 
  } 
} 

.tabs { 
  margin-left: 10px; 
  margin-right: 10px; 
  margin-top: -200rpx; 
  border-top-right-radius: 20px; 
  border-top-left-radius: 20px; 
  display: flex; 
  background-color: #fff; 
  border-bottom: 1px solid #eee; 
  
  .tab-item { 
    flex: 1; 
    height: 44px; 
    line-height: 44px; 
    text-align: center; 
    font-size: 15px; 
    color: #333; 
    position: relative; 
    
    &.active { 
      color: #007AFF; 
      
      &::after { 
        content: ''; 
        position: absolute; 
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%); 
        width: 20px; 
        height: 2px; 
        background-color: #007AFF; 
      } 
    } 
  } 
} 

.filter-section { 
  margin-left: 10px; 
  margin-right: 10px; 
  background-color: #fff; 
  padding: 10px 15px; 
  
  .filter-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
    
    text { 
      width: 80px; 
      font-size: 14px; 
      color: #333; 
    } 
  } 
} 

.order-list { 
  padding: 10px; 
  
  .order-item { 
    background-color: #fff; 
    border-radius: 8px; 
    padding: 15px; 
    margin-bottom: 10px; 
    
    .info-row { 
      display: flex; 
      margin-bottom: 8px; 
      
      &:last-child { 
        margin-bottom: 0; 
      } 
      
      .label { 
        width: 80px; 
        color: #666; 
        font-size: 14px; 
      } 
      
      .value { 
        flex: 1; 
        color: #333; 
        font-size: 14px; 
      } 
    } 
  } 
} 
</style> 